<template>
	<div class="box">
		<el-row :gutter="14" style="margin-bottom: 14px;">
			<el-col :span="24">
				<div class="wrap">
					<div class="name">查询表格</div>
					<el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">

						<el-form-item label="名称">
							<el-input v-model="formInline.Name" />
						</el-form-item>
						<el-form-item style="margin-right: 20px;"><el-button type="primary" :icon="Search"
								color="#165dff" @click="onSubmit">查询</el-button></el-form-item>
						<!-- <el-form-item><el-button :icon="RefreshRight"
								@click="resetForm(ruleFormRef)">重置</el-button></el-form-item> -->
						<el-form-item><el-button :icon="Plus" color="#165dff" type="primary"
								@click="newbuilt">新增</el-button></el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="14" style="margin-bottom: 14px;min-height: 75vh;">
			<el-col :span="24">
				<div class="wrap-box">
					<!-- <div class="wrap-box-btn">
						<el-button :icon="Printer">导出</el-button>
					</div> -->
					<el-table :data="formData.tableData" style="width: 100%"
						:header-cell-style="{ background: '#f2f3f5' }" border>
						<el-table-column fixed type="index" width="100" label="序号" align="center"></el-table-column>
						<el-table-column prop="stationName" label="电站名称" align="center"></el-table-column>
						<el-table-column label="坐标" align="center">
							<template #default="scope">
								<div>
									{{scope.row.lng}} · {{scope.row.lat}}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="capacity" label="总装机容量(MW)" align="center"></el-table-column>
						<el-table-column prop="inverterSum" label="逆变器数量" align="center"></el-table-column>
						<el-table-column prop="voltage" label="并网电压(V)" align="center"></el-table-column>
						<!-- 	<el-table-column label="数据源" align="center">
							<template #default="scope">
								<div>
									{{ ['操作日志','登录日志'][scope.row.logType-1]}}
								</div>
							</template>
						</el-table-column> -->
						<el-table-column label="操作" align="center">
							<template #default="scope">
								<el-button text type="primary" @click="handleEdit(scope.$index, scope.row)">
									编辑
								</el-button>
								<el-button text type="primary" @click="jumpTo(scope.$index, scope.row)">
									逆变器管理
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
							layout="prev, pager, next" :total="total" />
					</div>
				</div>
			</el-col>
		</el-row>
		<el-dialog v-model="visible" width="25%" :title="title">
			<el-form ref="ruleFormRef2" :model="ruleForm">
				<el-form-item label="电站名称" label-width="100px">
					<el-input v-model="ruleForm.stationName" />
				</el-form-item>
				<el-form-item label="坐标" label-width="100px">
					<el-input v-model="ruleForm.lng" style="width: 150px;" />
					·
					<el-input v-model="ruleForm.lat" style="width: 150px;" />
				</el-form-item>
				<el-form-item label="装机容量" label-width="100px">
					<div style="display:flex;"><el-input v-model="ruleForm.capacity"
							style="margin-right: 6px; width: 300px;" />MW
					</div>
				</el-form-item>
				<el-form-item label="逆变器数量" label-width="100px">
					<el-input v-model="ruleForm.inverterSum" disabled />
				</el-form-item>
				<el-form-item label="并网电压" label-width="100px">
					<div style="display:flex;"><el-input v-model="ruleForm.voltage"
							style="margin-right: 6px; width: 300px;" />V</div>
				</el-form-item>
				<!-- 	<el-form-item label="数据源" label-width="100px">
					<el-select v-model="ruleForm.region" placeholder="请选择" style="width: 100%;">
						<el-option v-for="item in optionsData" :key="item.id" :label="item.modelName"
							@click="changeOptionItem(item)" :value="item.modelCode" />
					</el-select>
					<el-select filterable remote reserve-keyword placeholder="请选择" remote-show-suffix
						:remote-method="remoteMethod" :loading="loading" style="width: 100%;">
						<el-option v-for="item in optionsData" :key="item.modelId" :label="item.modelName"
							:value="item.modelCode" @click="changeOptionItem(item)" />
					</el-select>
				</el-form-item> -->
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" color="#2354f1" @click="submitForm(ruleFormRef2)">确定</el-button>
					<el-button type="primary" color="#eee" @click="resetForm2(ruleFormRef2)">取消</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import { reactive, onMounted, ref } from 'vue';
	import { useRouter } from 'vue-router';
	import Storage from '@/utils/encryption';
	import { stationInsert, stationQuery, stationUpdate } from '@/api/manage';
	import { Search, RefreshRight, Plus, Printer } from '@element-plus/icons-vue'
	import { ElButton, ElDrawer } from 'element-plus'
	import type { FormInstance, FormRules } from 'element-plus'
	import { ElMessage } from 'element-plus'

	const visible = ref(false)
	const title = ref('新增电站')
	const newbuilt = () => {
		title.value = '新增电站'
		ruleFormId.value = null
		visible.value = true
	}
	const ruleForm = reactive<RuleForm>({
		capacity: '',
		inverterSum: 0,
		lat: '',
		lng: '',
		stationName: '',
		// companyId: Storage.getStorage('company_id'),
		voltage: '',
	})
	const changeOptionItem = (vel) => {
		console.log(vel)
		ruleForm.modelId = vel.modelId
		ruleForm.modelName = vel.modelName
		ruleForm.modelCode = vel.modelCode
		ruleForm.energyType = vel.energyType

	}

	const ruleFormId = ref(null)
	const handleEdit = (index, val) => {
		title.value = '编辑电站'
		ruleFormId.value = val.id
		ruleForm.capacity = val.capacity
		ruleForm.inverterSum = val.inverterSum
		ruleForm.registerCode = val.registerCode
		ruleForm.lat = val.lat
		ruleForm.lng = val.lng
		ruleForm.stationName = val.stationName
		ruleForm.voltage = val.voltage
		visible.value = true
	}
	const resetForm2 = (formEl : FormInstance | undefined) => {
		visible.value = false
		if (!formEl) return
		formEl.resetFields()
	}
	const ruleFormRef2 = ref()
	const submitForm = async (formEl : FormInstance | undefined) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				console.log(ruleForm)
				if (ruleFormId.value) {
					let data = ruleForm
					data.id = ruleFormId.value
					stationUpdate(data).then(res => {
						console.log(res)
						if (res.data.status == 200) {
							tabData();
							ElMessage({
								message: res.data.message,
								type: 'success',
							})
							visible.value = false
						} else {
							ElMessage.error(res.data.message)
						}
					})
				} else {
					stationInsert(ruleForm).then(res => {
						console.log(res)
						if (res.data.status == 200) {
							tabData();
							ElMessage({
								message: res.data.message,
								type: 'success',
							})
							visible.value = false
						} else {
							ElMessage.error(res.data.message)
						}
					})
				}

			} else {
				console.log('error submit!', fields)
			}
		})
	}

	const router = useRouter();
	// const route = useRoute();


	const formInline = reactive({
		Name: '',
	});

	onMounted(() => {
		tabData();
	});

	const formData = reactive({
		tableData: [
		]
	});


	const page = reactive({
		pageNum: 1,
		pageSize: 12,
	})

	const total = ref(null)
	const tabData = () => {
		let data = {
			// companyId: Storage.getStorage('company_id'),
			stationName: formInline.Name
		};
		console.log(data);
		stationQuery(data).then((res : any) => {
			console.log(res);
			formData.tableData = res.data.data
			total.value = res.data.total
		});
	};

	const onSubmit = () => {
		tabData()
	};
	const resetForm = (formEl : FormInstance | undefined) => {
		formInline.Name = ''
	}
	const jumpTo = (index, row : any) => {
		console.log(row);
		router.push({
			name: 'InverterManagement',
			query: {
				id: row.stationCode
			}
		});
	};
	const handleSizeChange = (val) => {
		page.pageNum = val
		console.log(val)
		tabData()
	}
	const handleCurrentChange = (val) => {
		page.pageNum = val
		console.log(val)
		tabData()
	}

	const formSize = ref('default')
	const ruleFormRef = ref<FormInstance>()
</script>
<style lang="scss" scoped>
	.drawer_name {
		color: #555;
		font-size: 12px;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
	}

	.el-drawer__header {
		color: #191a1a;
		margin-bottom: 10px;
	}

	.ruleform {
		margin: 20px 0;
	}

	.drawer_img {
		margin: 0 60px 18px;
		display: flex;
		align-items: center;
	}

	.box {
		width: 100%;
		padding: 10px;

		.el-form-item__label {
			color: #89898b;
		}

		.wrap {
			background-color: #fff;
			padding: 20px 20px 0;
			border-radius: 8px;

			.name {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 10px;
			}
		}

		.wrap-box {
			width: 100%;
			height: 100%;
			position: relative;
			padding: 20px;
			border-radius: 8px;
			background-color: #fff;

			.wrap-box-btn {
				width: 100%;
				display: flex;
				justify-content: end;
				margin-bottom: 10px;
			}

			.pagination {
				position: absolute;
				bottom: 20px;
				right: 20px;
			}
		}

		.btn {
			display: flex;
		}

		.b-text {
			margin: 0 auto;
			text-align: center;

			.text {
				color: #409eff;
			}

			.text1 {
				color: #67c23a;
			}

			.text2 {
				color: #f56c6c;
			}

			.text3 {
				color: #67c23a;
			}
		}
	}
</style>